﻿// 高德地图版本  1.4.15
var choose_map = {
    props: {
        id: {
            type: String,
            default: 'container',
        },

        lnglats: {
            type: Array,
            default: [121.481543, 31.243394],
        },
        anydetailed: {
            type: Boolean,
            default: false,
        },
        addrdetail: {
            type: String,
            default: "上海市静安区天潼路619号",
        },
        get_address_after: {
            type: Function,
            default: function () { }
        }
    },
    data: function () {
        return {
            map: {},// 地图
            marker: {},// 地图上的标记点
            placesearch: {},// 搜索
            geocoder: null,
            tipinputvalue: '',
            lng: null,
            lat: null,
            zoom: 14,
            result: {
                getaddrdetail: '',
                getlnglats: '',
                getprovince: '',
                getcity: '',
                getdistrict: '',
                getadcode: '',
            },
        }
    },
    mounted: function () {
        this.init();
    },
    methods: {
        init: function () {
            this.result.getaddrdetail = this.addrdetail;
            this.map = new AMap.Map(this.id, {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: this.zoom, //初始化地图层级
                center: this.lnglats, //初始化地图中心点
                //zoomEnable: false
            });

            map = this.map;
            this.marker = new AMap.Marker({
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: this.lnglats,
                offset: new AMap.Pixel(-13, -30),
            });
            this.marker.setMap(map);

            if (this.lnglats.length = 2) {
                // 注册组件
                this.registgeocoder();

                // 根据地址获取详细坐标
                this.geoCode(this.addrdetail)
            }

            if (this.anydetailed) {
                var that = this;
                this.map.on("zoomchange", function (e) {
                    that.zoomchange();
                })

                this.map.on('click', function (e) {
                    that.mapclick(e);
                })
            }
        },
        zoomchange: function () {
            this.zoom = this.map.getZoom();
        },
        mapclick: function (e) {
            if (this.marker) {
                this.marker.setMap(null);
                this.marker = null;
            }
            this.closeInfoWindow();
            this.marker = new AMap.Marker({
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [e.lnglat.getLng(), e.lnglat.getLat()]
            });
            
            this.regeoCode(e.lnglat);
            this.marker.setMap(this.map);
            this.map.setZoomAndCenter(this.zoom, [e.lnglat.getLng(), e.lnglat.getLat()])
        },
        registgeocoder: function () {
            this.placeSearch = new AMap.PlaceSearch({
                extensions: 'all'
            });

            var auto = new AMap.Autocomplete({
                input: "tipinput"
            })

            if (!this.geocoder) {
                this.geocoder = new AMap.Geocoder({
                    //city: "010", //城市设为北京，默认：“全国”
                    //radius: 1000 //范围，默认：500
                });
            }

            // 构造地点查询类
            AMap.event.addListener(auto, "select", this.select);//注册监听，当选中某条记录时会触发
        },
        select: function (e) {
            this.tipinputvalue = e.poi.name;
            this.search();
        },
        placeSearch_CallBack: function (data) {
            var poi = data.poiList.pois[0];
            this.lng = poi.location.lng;
            this.lat = poi.location.lat;
            this.marker.setPosition(poi.location);
            this.map.setCenter(poi.location);
            this.map.setFitView(this.marker);

            // 获取地址
            this.regeoCode(poi.location);
            this.map.setZoomAndCenter(this.zoom, [this.lng, this.lat])
        },
        geoCode: function (address) {
            var that = this;
            this.geocoder.getLocation(address, function (status, result) {
                if (status === 'complete' && result.geocodes.length) {
                    that.lng = result.geocodes[0].location.lng;
                    that.lat = result.geocodes[0].location.lat;
                    // 获取地址
                    that.regeoCode(result.geocodes[0].location);
                } else {
                    log.error('根据地址查询位置失败');
                }
            });

        },
        regeoCode: function (lnglats) {
            // 获取坐标
            this.result.getlnglats = '["' + lnglats.lng + '","' + lnglats.lat + '"]'
            if (!this.geocoder) {
                this.geocoder = new AMap.Geocoder({
                    //city: "010", //城市设为北京，默认：“全国”
                    //radius: 1000 //范围，默认：500
                });
            }
            var that = this;
            this.geocoder.getAddress(lnglats, function (status, result) {
                if (status === 'complete') {
                    that.result.getprovince = result.regeocode.addressComponent.province;
                    that.result.getcity = result.regeocode.addressComponent.city;
                    that.result.getdistrict = result.regeocode.addressComponent.district;
                    that.result.getadcode = result.regeocode.addressComponent.adcode;
                    that.result.getaddrdetail = result.regeocode.formattedAddress;
                    that.tipsInfo(that.result.getaddrdetail)

                } else {
                    console.info(JSON.stringify(result))
                }
            });
        },
        tipsInfo: function (addr) {
            /*弹出消息体**/
            //实例化信息窗体
            var title = '当前位置', content = [];
            content.push(addr);
            var that = this;
            var infoWindow = new AMap.InfoWindow({
                isCustom: true,  //使用自定义窗体
                content: that.createInfoWindow(title, content.join("<br/>")),
                offset: new AMap.Pixel(16, -45)
            });
            infoWindow.open(that.map, that.marker.getPosition());
        },
        closeInfoWindow: function () {
            if (this.map) {
                this.map.clearInfoWindow();
            }
        },
        createInfoWindow: function (title, content) {
            var info = document.createElement("div");
            info.className = "custom-info input-card content-window-card";

            //可以通过下面的方式修改自定义窗体的宽高
            //info.style.width = "400px";

            // 定义顶部标题
            var top = document.createElement("div");
            var titleD = document.createElement("div");
            var closeX = document.createElement("img");
            top.className = "info-top";
            titleD.innerHTML = title;
            closeX.src = "https://webapi.amap.com/images/close2.gif";
            closeX.onclick = this.closeInfoWindow;

            top.appendChild(titleD);
            top.appendChild(closeX);
            info.appendChild(top);

            // 定义中部内容
            var middle = document.createElement("div");
            middle.className = "info-middle";
            middle.style.backgroundColor = 'white';
            middle.innerHTML = content;
            info.appendChild(middle);

            // 定义底部内容
            var bottom = document.createElement("div");
            bottom.className = "info-bottom";
            bottom.style.position = 'relative';
            bottom.style.top = '0px';
            bottom.style.margin = '0 auto';
            var sharp = document.createElement("img");
            sharp.src = "https://webapi.amap.com/images/sharp.png";
            bottom.appendChild(sharp);
            info.appendChild(bottom);
            return info;
        },
        getAddr: function () {
            this.get_address_after(this.result);
        },
        search: function () {
            var that = this;
            this.placeSearch.search(this.tipinputvalue, function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    that.map.setZoom(14);
                    that.placeSearch_CallBack(result);
                }
            })
        }
    },
    template: '<div style="width:100%;height:100%;position:relative"><div :id="id"></div>'
        + '<div class="info" v-show="anydetailed">'
        + '<div class= "input-item">'
        + '<div class="input-item-prepend">'
        + '<span class="input-item-text" style="width:8rem;">请输入关键字</span>'
        + '</div>'
        + '<input id="tipinput" v-model="tipinputvalue" type="text"> '
        + '<button v-on:click="search()" class="mapbuttion">搜索</button> '
        + '<button v-on:click="getAddr()">获取地址</button>'
        + '</div>'
        + '</div >',
};